<template>
  <div v-if="loginVisible"
    class="tw-loginpage" :class="{xbg2: bgtimer, inDialog: props.inDialog}">
    <h1 class="tw-loginpage-header" v-if="!props.inDialog">
      <a v-if="!logoloading"></a>
      <a v-else>
        <template v-if="$store.state
          && $store.state.custLogoInfo
          && $store.state.custLogoInfo.logoUrl">
          <img :src="$store.state.custLogoInfo.logoUrl" />
        </template>
        <img src="@assets/images/Logo.png" alt="">
      </a>
    </h1>
    <main class="tw-loginpage-body">
      <div class="tw-login">
        <div class="text-center mb-medium" style="display: flex;justify-content: center;">
          <div class="tw-login-tabpanel">
            <div class="tw-login-tabitem"  :class="{ 'active': isUsernameLogin }">
              账户登录
            </div>
          </div>
        </div>

        <!-- 帐号密码登录 -->
        <div class="tw-login-panel" v-if="isUsernameLogin">
          <div class="mb-tiny" style="display: flex;justify-content: space-between;align-items: center;">
            &nbsp;
          </div>
          <div class="tw-login-inputbox mb-medium">
            <i class="tw-loginicon x48 xuser"></i>
            <input v-model="formData.username" type="text" placeholder="用户名" />
          </div>

          <div class="tw-login-inputbox mb-medium">
            <i class="tw-loginicon x48 xpwd"></i>
            <input v-model="formData.password" type="password" placeholder="请输入密码"/>
          </div>

          <div class="tw-login-inputbox xvalidation mb-medium" v-if="captchaVisibale">
            <i class="tw-loginicon x48 xpwd"></i>
            <input v-model="formData.captchaText" type="text" placeholder="请输入验证码" @keydown.enter="handleLogin()" />

            <img v-if="verifyCodeType === 'eco' &&
              captchaData.base64Img
              " :src="captchaData.base64Img" alt="验证码" title="点刷新验证码"
              @click="authApi.captchaView()" />

            <div v-if="verifyCodeType === 'local'" id="vcode" class="tw-login-verifycodebox"></div>
          </div>

          <div class="mb-tiny">
            <a class="tw-loginbtn" @click="handleLogin">登 录</a>
          </div>
        </div>

      </div>
    </main>


    <div class="tw-loginpage-copyright" style="color: #646C9C;" v-if="!props.inDialog">
      Copyright © 2008-现在 天闻数媒科技（北京）有限公司, All Rights Reserved
      {{ $app.appVersion }}
    </div>

  </div>
</template>
<script>
export default {
  name: 'page-login'
}
</script>
<script setup>
  import { ref, reactive, onMounted, onUnmounted, nextTick } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import * as cnt from '@/management/utils/constant.ts'
  import authApi from '@/management/api/eco/auth'

  const props = defineProps({
    inDialog: {
      type: Boolean,
      default: false
    }
  })
  const router = useRouter()
  const formData = reactive({
    username: '',
    password: ''
  })
  const captchaVisibale = ref(false)
  const isUsernameLogin = ref(true)
  const logoloading = ref(false)
  const loginVisible = ref(true)
  const bgtimer = ref(false)

  const handleLogin = () => {
    console.log(formData)
    $app.delAuth()
    if (formData.username === '') {
      $ui.msg({ type: 'warning', message: '请输入用户名' })
      return
    }

    if (formData.password === '') {
      $ui.msg({ type: 'warning', message: '请输入密码' })
      return
    }

    authApi.auth.login(formData).then((res) => {
        if (res.data.data && res.data.data.access_token) {
          const { access_token, userId, headImg, nickName, expire_in } = res.data.data
          const token = access_token
          const tokenExpired = Date.now() + expire_in * 1000
          $app.saveLocalAuth({ token, tokenExpired, user: { userId } })
          getUserInfo()
        } else {
          // noop
          let msg = {
            message: res.data.msg,
            type: 'warning'
          }
          $ui.msg(msg)
        }
      }
    )

    const getUserInfo =  () =>{
      authApi.system.user.getInfo().then((res) => {
        if (res.data.code === 200 && res.data.data) {
          const user = res.data.data.user
          user.auths = res.data.data.permissions
          // let bianji = user.roles.some((x) => {
          //   return x.roleId === $cnt.EditRole
          // })
          // user.roleName = bianji ? 'bianji' : 'yunying'
          $app.saveLocalAuth({ user })
          router.push({
            path: '/forms'
          })
        }
      })
    }
  }

</script>

<style lang="scss" scoped>
#app {
  background: url("./images/login-bg.svg") no-repeat;
  background-size: 100%;
  object-fit: fill;
}
</style>
<style lang="scss" >
@use "./login.scss";
</style>
